<template>
  <div class="appcontainer taskLeaderConfig">
    <el-dialog
      :model-value="showConfigModal"
      title="项目配置"
      @close="cancel"
      width="800"
      class="configModal"
    >
      <el-scrollbar height="520px">
        <template v-for="item in projectList" :key="item.id">
          <el-card class="businessBox">
            <div class="absolute top-10px right-10px cursor-pointer">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon><More /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="editProjectName(item)"
                      >编辑项目名称</el-dropdown-item
                    >
                    <el-dropdown-item @click="editLeader(item)"
                      >编辑负责人</el-dropdown-item
                    >
                    <el-dropdown-item @click="deleteProject(item)"
                      >删除项目</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="mt-15px mb-20px moreHidden">
              项目名称：{{ item.businessName }}
            </div>
            <div class="moreHidden">
              项目负责人：{{
                item.businessLeaderName && item.businessLeaderName.length
                  ? item.businessLeaderName.toString()
                  : ''
              }}
            </div>
          </el-card>
        </template>
      </el-scrollbar>
      <template #footer>
        <div>
          <el-button type="primary" @click="addProject">新增项目</el-button>
          <el-button @click="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改项目名称 -->
    <el-dialog
      :title="dialogTitle"
      v-model="showEditName"
      width="500"
      @close="editCancel"
    >
      <el-form :model="form" label-width="100" ref="editNameForm">
        <el-form-item
          label="项目名称"
          prop="businessName"
          :rules="[
            { required: true, message: '请输入项目名称', triggle: 'blur' }
          ]"
        >
          <el-input v-model="form.businessName" style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button type="primary" @click="editConfirm">确认</el-button>
          <el-button @click="editCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改项目负责人 -->
    <SelectDialog
      :dialog-param="dialogParam"
      @ok="selectDialogData"
      @close="closeFn"
    ></SelectDialog>
  </div>
</template>

<script setup>
import {
  getProjectNodeList,
  editProjectNode,
  delProjectNode
} from '@/api/taskManage/task'
const { proxy } = getCurrentInstance()
const props = defineProps({
  showConfigModal: {
    type: Boolean,
    default: false
  },
  projectList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:showConfigModal', 'queryList'])

function getList() {
  emit('queryList')
}

const dialogTitle = ref('')
function editProjectName(item) {
  dialogTitle.value = '修改项目名称'
  showEditName.value = true
  editProject.value = item
  form.value = item
}
function editLeader(item) {
  console.log(item, 1)
  editProject.value = item
  dialogParam.value.isDialog = true
  dialogParam.value.defaultCheckedKeys =
    item.businessLeaderId && item.businessLeaderId.length
      ? item.businessLeaderId
      : []
}
function deleteProject(item) {
  proxy.$modal.confirm('是否确认删除该项目').then(() => {
    delProjectNode(item.businessId).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  })
}

const form = ref({})
const editProject = ref({})
// 修改项目名称
const showEditName = ref(false)

function editConfirm() {
  proxy.$refs.editNameForm.validate(valid => {
    if (valid) {
      const params = {
        businessId: editProject.value.businessId,
        ...form.value
      }
      if (dialogTitle.value === '新增项目') {
        delete params.businessId
      }
      editProjectNode(params).then(() => {
        editCancel()
        proxy.$modal.msgSuccess('修改成功')
        getList()
      })
    }
  })
}
function editCancel() {
  showEditName.value = false
  form.value = {}
}

// 修改项目负责人
const dialogParam = ref({
  isDialog: false, //是否弹出框
  title: '修改项目负责人', //弹出框的标题
  multiple: true, //是否多选
  dataType: 'person',
  //   data: [], // tree的数据 如果是人员的数据的话，传dataType:'person'，data 数据可以不用
  nodeKey: 'uuid', //数据唯一值，默认是id
  checkStrictly: false, //是否遵循父子不互相关联的做法，默认为 false
  defaultCheckedKeys: []
})

/**
 *  dialog确定返回数据
 *  判断是否更新负责人
 *  调用接口更新项目负责人信息
 */
function selectDialogData(val) {
  const personId = val.defaultCheckedKeys.map((v, i) => {
    return {
      value: v.replace('U', ''),
      label: val.labelData[i]
    }
  })
  const defaultCheckedKeys = val.defaultCheckedKeys.map(v => v.replace('U', ''))
  /**
   * 判断是否需要更新
   * 项目负责人为空
   * 项目负责人id与之前的不一致
   */
  const needUpdate =
    !editProject.value.businessLeaderId ||
    !editProject.value.businessLeaderId.length ||
    editProject.value.businessLeaderId.length !== defaultCheckedKeys.length ||
    editProject.value.businessLeaderId.some(
      v => !defaultCheckedKeys.includes(v)
    ) ||
    defaultCheckedKeys.some(
      v => !editProject.value.businessLeaderId.includes(v)
    )

  if (needUpdate) {
    editProjectNode({
      businessId: editProject.value.businessId,
      businessName: editProject.value.businessName,
      businessLeaderId: defaultCheckedKeys,
      businessLeaderName: personId.map(v => v.label)
    }).then(() => {
      proxy.$modal.msgSuccess('修改成功')
      getList()
    })
  }
}

function closeFn() {
  dialogParam.value.isDialog = false
}

function addProject() {
  dialogTitle.value = '新增项目'
  showEditName.value = true
}
function cancel() {
  emit('update:showConfigModal')
}
</script>

<style scoped lang="scss">
.taskLeaderConfig {
  .businessBox {
    width: 220px;
    height: 150px;
    position: relative;
  }
  .moreHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 控制多行的行数
    -webkit-box-orient: vertical;
  }
}

::v-deep(.configModal .el-dialog__body) {
  padding-right: 0;
  padding-left: 0;
}
::v-deep(.el-scrollbar__view) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex-wrap: wrap;
  // justify-content: space-between;
  padding: 0 30px;
  grid-row-gap: 20px;
}
</style>
